<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>99乘法口诀</title>
    <script type="text/javascript" >
        for(i=1;i<=9;i++){
            for(j=1;j<=i;j++){
                if(i == 9){
                    document.write("<span class='box box-bottom'>"+j+"x"+i+"="+i*j +"</span>");
                }else{
                    document.write("<span class='box'>"+j+"x"+i+"="+i*j +"</span>");
                }

            }
            document.write("<br/>")
        }

        for (var i = 1; i <= 9; i++) {
            for(j=i; j<= 9; j++){
                if(i == 1 && j != 9){
                    document.write("<span class='box box-top-none'>"+j+"x"+i+"="+i*j +"</span>");
                }else if(j == 9 && i != 1){
                    document.write("<span class='box box-bottom'>"+j+"x"+i+"="+i*j +"</span>");
                }else if(i == 1 && j== 9){
                    document.write("<span class='box box-bottom box-top-none'>"+j+"x"+i+"="+i*j +"</span>");
                }else{
                    document.write("<span class='box'>"+j+"x"+i+"="+i*j +"</span>");
                }

            }
            document.write("<br/>");
        }

        // 版本二

        // for(i = 1; i <= 9; i++){
        //     for(j = 1; j <= i; j++){
        //         document.write("<span class='box'>"+j+"x"+i+"="+i*j +"</span>");
        //     }
        //     document.write("<br/>")
        // }
        //
        // for (var i = 1; i <= 9; i++) {
        //     for(j=i; j<= 9; j++){
        //         if(i == 9 || j == 9){
        //             document.write("<span class='box box-bottom'>"+j+"x"+i+"="+i*j +"</span>");
        //         }else{
        //             document.write("<span class='box'>"+j+"x"+i+"="+i*j +"</span>");
        //         }
        //     }
        //     document.write("<br/>");
        // }
    </script>
<style type="text/css">
    .box + .box {
        border-left: none;
    }
    .box {
        border: 1px solid #ddd;
        display: inline-block;
        width: 70px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border-bottom: none;
    }
    .box-bottom{
        border-bottom: 1px solid #ddd;
    } 
    .box-top-none{
        border-top: none;
    }
</style>
</head>

<body>

</body>
</html>
